<template>
	<view>
		<view>
			<view
				class="flex-start flex-wrap"
				v-if="
					formatType == 'main' &&
					keyWordList &&
					keyWordList.length > 0
				"
			>
				<view
					class="reply-item-cont rel"
					v-for="item in keyWordList"
					:key="item.id"
					@tap="selectedReplyKeyWord(item)"
					:class="
						selectedTags.map((i) => i.id).includes(item.id)
							? 'reply-item-cont-active'
							: ''
					"
				>
					{{ item.tagName }}
					<view
						class="colse-icon"
						v-if="item.tagSource == 2"
						@click="deleteTag(item)"
						><uni-icons
							type="closeempty"
							size="36rpx"
							color="#666666"
						></uni-icons
					></view>
				</view>
				<view class="reply-item-cont" @tap="addEditTag" v-if="isAdd"
					>其他</view
				>
			</view>
			<view v-if="isShowEditTag" class="flex-start">
				<input
					v-model="editTag"
					class="uni-input w80"
					type="text"
					placeholder="请输入"
				/>
				<view class="primary-color ml10" @tap="save">保存</view>
			</view>
		</view>

		<view class="flex-start flex-wrap" v-if="formatType == 'reply'">
			<view
				class="reply-item-cont"
				v-for="item in keyWordList"
				:key="item.id"
				@tap="selectedReplyKeyWord(item)"
				>{{ item.tagName }}</view
			>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		tagType: {
			type: [String, Number],
			default: 0,
		},
		selectType: {
			type: String,
			default: 'single',
		},
		isAdd: {
			type: Boolean,
			default: true,
		},
		formatType: {
			type: String,
			default: 'reply',
		},
		keyWordList: {
			type: Array,
			value: [],
			default: () => [],
		},
	},
	data() {
		return {
			isShowEditTag: false,
			selectedTags: [],
			editTag: '',
		}
	},
	methods: {
		//删除标签
		deleteTag(value) {
			this.$request
				.request('carer-platform/carer/businessTag/deleteBusinessTag', {
					data: {
						id: value.id,
					},
				})
				.then((res) => {
					if (res.success) {
						this.$emit('update', this.tagType)
					}
				})
		},
		//添加标签
		addEditTag() {
			this.isShowEditTag = !this.isShowEditTag
		},
		selectedReplyKeyWord(value) {
			if (this.selectType === 'single') {
				this.$emit('sumbit', value)
			} else {
				const list = this.selectedTags.map((i) => i.id)
				if (list.includes(value.id)) {
					const index = list.findIndex((i) => i == value.id)
					this.selectedTags.splice(index, 1)
				} else {
					this.selectedTags.push(value)
				}
				this.$emit('sumbit', this.selectedTags)
			}
		},
		save() {
			if (!this.editTag) {
				uni.showToast({
					title: '输入内容不能为空',
					icon: 'none',
				})
				return
			}
			this.$request
				.request(
					'carer-platform/carer/businessTag/addUserBusinessTag',
					{
						method: 'post',
						data: {
							tagName: this.editTag,
							userId: uni.getStorageSync('userId'),
							orgId: uni.getStorageSync('orgId'),
							tagType: this.tagType,
						},
					}
				)
				.then((res) => {
					if (res.success) {
						this.$emit('update', this.tagType)
						this.editTag = ''
						this.isShowEditTag = false
					}
				})
		},
	},
}
</script>
<style scoped lang="scss">
.uni-input {
	border: 2rpx #eeeeee solid;
	border-radius: 10rpx;
	padding: 10rpx 20rpx;
}

.reply-item-cont {
	display: inline-block;
	border: 2rpx #cfcfcf solid;
	margin-right: 15rpx;
	margin-bottom: 15rpx;
	border-radius: 35rpx;
	height: 70rpx;
	line-height: 70rpx;
	padding: 0rpx 30rpx;
	color: #666;
}
.reply-item-cont-active {
	border: 2rpx $primary-color solid;
	color: $primary-color;
}
.colse-icon {
	display: inline-block;
	/* border: 1rpx solid #f23c3c; */
	background-color: #ccc;
	border-radius: 50%;
	width: 40rpx;
	height: 40rpx;
	line-height: 40rpx;
	text-align: center;
	position: absolute;
	top: -10rpx;
}
</style>
